<template>
  <div class="actions-box">
    <el-form :inline="true" :model="searchFormContent" class="search-form">
      <el-form-item v-for="(item, index) in searchForm" :key="index" :label="item.label">
        <el-input v-model="searchFormVal[index]" :placeholder="`请输入${item.label}`" size="small"
          @change="changeSearchFormContent(index)"></el-input>
      </el-form-item>
      <el-form-item label="志愿者">
        <el-select v-model="searchFormVal[length - 1]" placeholder="请选择是否为志愿者" size="small"
          @change="changeSearchFormContent(length - 1)">
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>

        <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
        <el-button size="small" @click="resetSearch">重置</el-button>

      </el-form-item>
    </el-form>
    <div class="action-btns">
      <div>
        <el-button type="primary" size="small" icon="el-icon-plus" @click="addItem">新增
        </el-button>
        <!-- <el-button type="danger" size="small" icon="el-icon-delete" @click="batchDelete">批量删除</el-button> -->
        <el-popconfirm title="这是确定批量删除吗？" @confirm="batchDelete">
          <el-button type="danger" slot="reference" size="small" icon="el-icon-delete" :disabled="delBtlStatu">批量删除
          </el-button>
        </el-popconfirm>
      </div>

      <!--  -->
      <div v-if="needImportExport">
        <el-button type="success" size="small" plain icon="el-icon-download" @click="batchImport">批量导入</el-button>
        <el-button type="success" size="small" plain icon="el-icon-upload2" @click="batchExport">批量导出</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ActionsBox",
  data() {
    return {
      volunteer: '',
      searchFormVal: [], // 用于暂存每个input的值
      length: 0,  // 数组长度
      searchFormContent: {}, // 表单最终的值
      delBtlStatu: "",
      activityName: "",
      activities: ["121", "3242", "1241"],
    };
  },
  parent() {
    this.delBtlStatu = true;
  },
  created() {
    // 获取某单位所有身采样活动
    /* this.$axios.get('').then(res => {
      this.activities = ["121", "3242", "1241"];
      this.activityName = this.activities[0];
    }) */
  },
  props: {
    searchForm: {
      type: Array,
      required: true,
    },
    needImportExport: {
      type: Boolean,
      required: true,
      default: true,
    },
  },
  mounted() {
    // 不可直接修改传递过来的props，可用一个变量替代
    // 响应式添加属性
    this.searchForm.forEach((val, index) => {
      this.$set(this.searchFormContent, val.key, "");
      this.$set(this.searchFormVal, index, "");
    });
    // 将最后一个设为志愿者
    this.$set(this.searchFormVal, this.searchFormVal.length, "");
    this.$set(this.searchFormContent, "volunteer", "");

    this.length = this.searchFormVal.length;
  },
  methods: {
    // 提交内容
    onSubmit() {
      this.$emit("submitSearchRequest", this.searchFormContent);
      console.log("submit!");
      console.log(this.searchFormContent);
      console.log(this.searchFormVal);
    },
    // 向父组件发送事件
    addItem() {
      this.$emit("addItem");
    },
    batchDelete() {
      this.$emit("batchDelete");
    },
    batchImport() {
      this.$emit("batchImport");
    },
    batchExport() {
      this.$emit("batchExport");
    },
    resetSearch() {
      this.searchForm.forEach((val, index) => {
        this.$set(this.searchFormContent, val.key, "");
        this.$set(this.searchFormVal, index, "");
      });
      // 将最后一个设为志愿者
      this.$set(this.searchFormVal, this.length - 1, "");
      this.$set(this.searchFormContent, "volunteer", "");

      this.$emit('resetTable')
    },
    // input内容有变化时，改变searchFormContent的值
    changeSearchFormContent(index) {
      let tempArr = Object.keys(this.searchFormContent); // 转为数组，方便获取下标
      tempArr.forEach((val, i) => {
        if (index === i) {
          this.$set(this.searchFormContent, val, this.searchFormVal[i]);
        }
      });
    },
    // 选择活动改变
    changeActivity(e) {
      console.log("e:  ", e);
    },
  },
};
</script>

<style scoped>
.action-btns {
  display: flex;
  justify-content: space-between;
}

.action-btns>div {
  display: inline-block;
}
</style>
